<template>
  <div>
    <h2>发送交易</h2>
    <form @submit.prevent="sendTransaction">
      <!-- <div>
        <label>发送者账号:</label>
        <input v-model="sender" placeholder="请输入发送者账号" required />
      </div> -->
      <!-- <div>
        <label>私钥（密码）:</label>
        <input type="password" v-model="privateKey" placeholder="请输入私钥" required />
      </div> -->
      <div>
        <label>接收者账号:</label>
        <input v-model="receiver" placeholder="请输入接收者账号" required />
      </div>
      <div>
        <label>金额:</label>
        <input type="number" v-model.number="amount" placeholder="请输入金额" required />
      </div>
      <button type="submit">发送交易</button>
    </form>
    <div v-if="result">
      <h3>交易结果</h3>
      <p><strong>交易ID:</strong> {{ result.tx_id }}</p>
      <p><strong>状态:</strong> {{ result.status }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'

export default {
  name: 'SendTransaction',
  setup() {
    const sender = ref('')
    // const privateKey = ref('')
    const receiver = ref('')
    const amount = ref(0)
    const result = ref(null)

    const sendTransaction = async () => {
      try {
        const payload = {
          // sender: sender.value,
          // private_key: privateKey.value,
          receiver: receiver.value,
          amount: amount.value
        }
        // console.log(payload)
        const response = await axios.post('/api/transaction/send', payload)
        result.value = response.data
        // console.log(result.value)
      } catch (error) {
        console.error(error)
        alert('发送交易失败')
      }
    }

    // return { sender, privateKey, receiver, amount, sendTransaction, result }
    // return { sender, receiver, amount, sendTransaction, result }
    return { receiver, amount, sendTransaction, result }
  }
}
</script>